<template>
	<view>
		<view class="swiperBox">
			<u-swiper :list="imgList" keyName="image" height="300" width="200" imgMode="aspectFit" bgColor="#fff">
			</u-swiper>
		</view>
		<view class="detail">
			<view class="title">{{needDetail.title}}</view>
			<view class="author">新旧程度：<span style="color: black;">{{needDetail.author}}</span></view>
		</view>
		<view class="message">
			需求者的话：<view class="content">{{needDetail.goodsDesc}}</view>
		</view>
		<view class="time">
			发布时间：{{needDetail.gmtCreate}}
		</view>
		<view class="footer" v-if="donateDetail.isExhibit!=0">
			<!-- 如果是未审核状态的不显示footer-->
			<view class="collect" @click="change">
				<u-icon name="star-fill" color="red" :size="24" v-if="isCollected"></u-icon>
				<u-icon name="star" :size="24" v-else></u-icon>
				收藏
			</view>
			<view class="btn">
				<u-button text="我想捐" @click="donateInfo(needDetail)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				needDetail: {},
				isCollected: false,
				collectionInfo: {},
				imgList: []
			}
		},
		onLoad(options) {
			var res = JSON.parse(decodeURIComponent(options.info))
			this.needDetail = res
			this.imgList.push(res.picture)
		},
		onShow() {
			this.check();
		},
		methods: {
			// 判断是否已登录
			async checkLogin() {
				if (uni.getStorageSync("token")) {
					// 获取用户信息
					const {
						data: res
					} = await this.$myRequest({
						url: '/loginBefore/getMemberInfo',
						header: {
							'content-type': 'application/json;charset:utf-8',
							'token': uni.getStorageSync("token"),
						}
					})
					console.log(res);
					if (res.code == 20000) {
						// 将用户id放进缓存
						uni.setStorageSync('userId', res.data.userInfo.userId)
					} else if (res.code == 20001) {
						uni.showToast({
							title: '登录已过期,请重新登录!',
							icon: 'none'
						})
						uni.clearStorageSync()
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/Mine/Login'
							})
						}, 2000)

					}
				} else {
					uni.showToast({
						title: '请先登录!',
						icon: 'error'
					});
				}
			},
			// 判断是否已收藏
			async check() {
				var {
					data: res
				} = await this.$myRequest({
					url: '/CollHis/checkColl/' + uni.getStorageSync('userId') + '/' + this.needDetail.goodsId
				})
				if (res.data.coll) { //有数据说明在收藏列表中 
					this.isCollected = true, //点亮收藏图标
						this.collectionInfo = res.data.coll,
						console.log(this.collectionInfo);
				}
			},
			async change() {
				var that = this
				if (!uni.getStorageSync('userId')) {
					this.checkLogin()
				} else {
					this.isCollected = !this.isCollected // 修改收藏状态
					if (this.isCollected) {
						var {
							data: res
						} = await this.$myRequest({
							url: '/CollHis/addColl',
							method: 'post',
							data: {
								userId: uni.getStorageSync('userId'),
								goodsId: that.needDetail.goodsId
							}
						})
						if (res.code == 20000) {
							this.check()
							uni.showToast({
								title: '收藏成功！',
								icon: 'none'
							})
						}
					} else {
						var {
							data: res
						} = await this.$myRequest({
							url: '/CollHis/deleteColl/' + this.collectionInfo.collectionId,
							method: 'delete',
						})
						if (res.code == 20000) {
							uni.showToast({
								title: '取消收藏成功！',
								icon: 'none'
							})
						}

					}
				}

			},
			donateInfo(needDetail) {
				if (!uni.getStorageSync('userId')) {
					this.checkLogin()
				} else {
					uni.navigateTo({
						url: '/page_index/DonateInfo?info=' + encodeURIComponent(JSON.stringify(needDetail)),
					});
				}
			}
		},

	}
</script>

<style lang="scss">
	.swiperBox {
		padding: 20rpx 0;
		background-color: #fff;
	}

	.detail {
		background-color: #fff;
		padding: 20rpx 20rpx;

		.title {
			font-size: 40rpx;
			font-weight: bold;
		}

		.author {
			margin-top: 30rpx;
			font-size: 26rpx;
			color: #808000;
		}

	}

	.message {
		margin-top: 10rpx;
		background-color: #fff;
		padding: 10rpx 20rpx 20rpx;
		font-size: 32rpx;
		color: #808000;

		.content {
			font-size: 26rpx;
			margin-top: 10rpx;
			color: black;
		}
	}

	.time {
		font-size: 24rpx;
		text-align: right;
		margin-top: 10rpx;
		color: #8e8e8e;
	}

	.footer {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.collect {
			text-align: center;
			width: 250rpx;
			font-size: 26rpx;

			/deep/.u-icon {
				display: flex;
				justify-content: center;
			}
		}

		.btn {
			width: 250rpx;

			/deep/.u-button {
				background-color: red;
				color: #fff;
				border-radius: 50rpx;
			}
		}
	}
</style>
